<template>
	<z-paging ref="paging" loading-more-no-more-text="到底啦～" v-model="dataList" @query="queryList">
		<template #top>
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="white" @clickLeft="goBack">
				<template #left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
				<view class="flex center w-full fs-16 text-black">我的奖品</view>
			</uni-nav-bar>
			<view class="coupon-status-tabs flex justify-around pt-12 px-16">
				<view v-for="(tab,i) in tabs" :key="i" class="tab-item"
					:class="currentStatusTab===tab.code ? 'active text-color-regular fs-16 text-bold':'text-color-hint fs-15'"
					@click="onStatusTabClick(tab, i)">
					<text>{{tab.name}}</text>
				</view>
			</view>
		</template>
		<template #empty>
			<view>
				<image style="width:136px;height:136px;" src="@/static/svg/order/empty-order.svg"></image>
				<view class="mt-4 text-center fs-12 text-color-regular font-normal leading-17">暂无数据</view>
			</view>
		</template>
		<view v-for="(item,i) in dataList" :key="i" class="px-16 pt-16">
			<view v-if="currentStatusTab===1" class="coupon-item flex justify-between item-center px-16 py-8" :class="item.state === 1 ? 'active' : ''">
				<view class="left flex-col" :class="item.state === 1 ? 'color-primary' : 'text-color-hint'">
					<view class="fs-40 text-center"><text class="fs-16">¥</text>{{ item.amt }}</view>
					<view class="fs-12 text-center" :style="item.state === 1 ? 'color: rgba(250,69,67,0.6);' : ''">{{ item.fullAmount == 0 ? `无门槛券` : `满${item.fullAmount}元可用` }}</view>
				</view>
				<view class="right ml-24 flex item-center justify-between">
					<view class="flex-col fs-12 text-color-hint justify-between">
						<view class="fs-16 font-bold c3 mb-16 mt-4">{{ item.title }}</view>
						<view>{{item.receiveTime}}-{{item.expireTime}}</view>
					</view>
					<view v-if="item.state === 1" class="fs-12 px-8 py-4 radius-8 text-white bg-primary flex-shrink ml-4" @click="toHomePage">去使用</view>
					<view v-if="item.state === 2 || item.state === 4" class="fs-12 px-8 py-4 radius-8 text-color-hint border-hint bg-white flex-shrink ml-4">{{item.state===2?'已使用':'已过期'}}</view>
				</view>
			</view>
			<view v-else class="goods-item flex item-center">
				<image :src="item.activeImg" mode="" class="flex-shrink mr-12"></image>
				<view class="py-4 px-16 flex justify-between item-center">
					<view class="flex-col c3 fs-14 justify-between">
						<view class="two-lines-ellipsis">{{item.activeTitle}}</view>
						<view class="fs-12 text-color-hint">{{item.validStartTime}}-{{item.validEndTime}}</view>
					</view>
					<view v-if="item.orderState === 2" class="fs-12 px-8 py-4 radius-8 text-white bg-primary flex-shrink ml-4" @click="toOrderDetail(item)">去核销</view>
					<view v-else-if="item.orderState === 4 || item.orderState === 5 || item.orderState === 6 || item.orderState === 7" class="fs-12 px-8 py-4 radius-8 text-color-hint border-hint bg-white flex-shrink ml-4">{{item.orderState===4 ? '已取消' : item.orderState===5?'已完成': item.orderState===7?'已核销' : '已关闭'}}</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import {onShow, onLoad} from '@dcloudio/uni-app'
	import {ref,unref} from 'vue'
	import {pageMyPrizeOrderApi, pageMyPrizeRedPacketApi} from '@/pagesF/api/index.js'

	const goBack = () => uni.navigateBack()

	const tabs = ref([{
			name: '券',
			code: 1
		},
		{
			name: '商品',
			code: 2
		}
	])
	const paging = ref(null)
	const currentStatusTab = ref(1)
	const onStatusTabClick = (tab, i) => {
		if (tab.code !== currentStatusTab.value) {
			currentStatusTab.value = tab.code
			queryParams.value.state = tab.code
			paging.value.reload()
		}
	}

	const dataList = ref([])
	const queryParams = ref({
		businessId: '',
		pageNum: 1,
		pageSize: 10,
	})
	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		let api = currentStatusTab.value === 1 ? pageMyPrizeRedPacketApi : pageMyPrizeOrderApi
		api(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}
	
	const refresh = () => {
		paging.value && paging.value.reload()
	}
	
	const toHomePage = () => {
		uni.navigateTo({
			url: `/pagesA/merchant/homepage?id=${queryParams.value.businessId}`
		})
	}
	const toOrderDetail = (item) => {
		uni.navigateTo({
			url: `/pagesA/order/order-detail?id=${item.id}&type=1`
		})
	}

	onShow(() => {
		refresh()
	})
	onLoad((query) => {
		queryParams.value.businessId = query.id
	})
</script>

<style lang="scss" scoped>
	.coupon-status-tabs {
		overflow: auto;
		white-space: nowrap;

		.tab-item {
			display: inline-flex;
			height: 30px;

			&:not(:last-child) {
				margin-right: 36px;
			}
		}

		.active {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 15%;
				height: 4px;
				width: 70%;
				border-radius: 4px;
				background: $uni-primary;
			}
		}
	}
	.two-lines-ellipsis {
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.coupon-item{
		background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-notes.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		&.active{
			background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-notes-active.png");
		}
		.left{
			width: 72px;
		}
		.right{
			width: 255px;
		}
	}
	.goods-item{
		image{
			width: 80px;
			height: 80px;
			border-radius: 8px 0px 0px 8px;
			flex-shrink: 0;
		}
		border-radius: 12px 12px 12px 12px;
		background: #FFFFFF;
	}
</style>